<template>
  <div>
    <component :is="one"></component>

    <div id="container">
      <div id="content2">
        <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="15" height="18" align="left" valign="top">
              <div align="left"></div>
            </td>
            <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
          </tr>
          <tr>
            <td height="4" colspan="2" align="left" valign="bottom"></td>
          </tr>
          <tr>
            <td height="15" align="left" valign="top">&nbsp;</td>
            <td height="15" align="left" valign="top" class="12">
              <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td height="20">
                    <div class="right_proaducts">我的位置&gt;&gt;科技项目申报&gt;专家信息管理<br />
                      <br />
                    </div>
                    <!--              <form action="" method="post" id="form">-->
                    <!--                  <DIV class=padding>
                    <DIV id=middlebody>-->
                    <table cellspacing="0" cellpadding="0" width="100%" border="0">
                      <tbody>
                        <tr>
                          <td>
                            <div align="left">|&nbsp;&nbsp;欢迎,admin&nbsp;&nbsp;|&nbsp;&nbsp;
                              <a class="table_t" href="#/">注销      </a>&nbsp;&nbsp;|&nbsp;&nbsp;
                              <a href="javascript:history.go(-1)">后退</a>&nbsp;&nbsp;|
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showusers">登录用户管理</a>
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showexperts">专家信息管理</a>
                            </div>
                          </td>
                          <td height="50">
                            <div align="center"><a href="#/admin/showunits">单位信息管理</a>
                            </div>
                          </td>
                          <td>
                            <div align="center"><a href="#/admin/showprojectCategorys">项目管理</a>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table id="app" class="mars" cellspacing="1" cellpadding="0" width="100%" border="0">
                      <tbody>
                        <tr bgcolor="#fba661" height="30">
                          <td width="7%">
                            <div align="center">编号ID</div>
                          </td>
                          <td width="7%">
                            <div align="center">姓名</div>
                          </td>
                          <td width="16%">
                            <div align="center">单位名称</div>
                          </td>
                          <td width="8%">
                            <div align="center">职称</div>
                          </td>
                          <td width="7%">
                            <div align="center">国籍</div>
                          </td>
                          <td width="8%">
                            <div align="center">性别</div>
                          </td>
                          <td width="8%">
                            <div align="center">电话</div>
                          </td>
                          <td width="21%">
                            <div align="center">简介</div>
                          </td>
                          <td width="9%">
                            <div align="center">修改</div>
                          </td>
                          <td width="9%">
                            <div align="center">删除</div>
                          </td>
                        </tr>
                        <tr bgcolor="#e4f1fe" v-for="(expert,i) in experts">
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.expertid}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.name}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.unitname}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.title}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.nation}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center" v-if="expert.sex=='0'">女</div>
                            <div align="center" v-if="expert.sex=='1'">男</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.tel}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center">{{expert.introduction}}</div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center"><button @click="sendExpert(i)">修改</button></div>
                          </td>
                          <td bgcolor="#f3f3f3">
                            <div align="center"><button @click="deleteExpert(i)">删除</button></div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div></div>
                    <!--              </form>-->
                  </td>
                </tr>
              </table>
              <br />
              <div class="table_wz"></div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <component :is="two"></component>
  </div>
</template>
<script>
  import four from '../../util/four';
  import aaa from '@/components/header.vue'
  import bbb from '@/components/footer.vue'
  const options = {
    data() {
      return {
        one: 'aaa',
        two: 'bbb',
        experts: [],
      }
    },
    components: {
      aaa, bbb
    },
    mounted() {
      this.getAllExperts();
    },
    methods: {
      getAllExperts() {
        four.get("/experts").then((res) => {
          this.experts = res.data.data;
        })
      },
      deleteExpert(i) {
        this.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          four.delete("/experts/" + this.experts[i].expertid).then((res) => {
            if (res.data.code == 20021) {
              this.$message.success("删除成功！");
              this.getAllExperts();
            }
            if (res.data.code == 20020) {
              this.$message.error("删除失败！");
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      sendExpert(i){
        sessionStorage.setItem("expert",JSON.stringify(this.experts[i]));
        this.$router.push('/admin/expertinfo');      }
    }
  }
  export default options;
</script>